<template>
  <div id="app">

    <h1>纯前端实现安全验证</h1>

    <div class="flex">
      <div>
        <vueVerify1 ref="vueVerify1" @result="result1" />
        <p><button @click="reset1">reset</button></p>
        <p>验证结果：<span v-show="v1">{{v1}}</span></p>
      </div>
      <pre class="code">
      options: {
        mode: 'position',
        area: [
          { key: 1, value: 'rgb(255, 237, 237)', label: '红色' },
          { key: 2, value: 'rgb(208, 252, 223)', label: '绿色' },
          { key: 3, value: 'rgb(255, 240, 199)', label: '橘黄色' }
        ],
        position: [
          { key: 1, label: '左上方位置' },
          { key: 2, label: '正上方位置' },
          { key: 3, label: '右上方位置' },
          { key: 4, label: '左边位置' },
          { key: 5, label: '中间位置' },
          { key: 6, label: '右边位置' },
          { key: 7, label: '左下方位置' },
          { key: 8, label: '正下方位置' },
          { key: 9, label: '右下方位置' }
        ],
        success: 'Success!',
        successSub: 'Good job,dude!',
        error: 'Error...',
        errorSub: 'Try again'
      },
      </pre>
    </div>

    <div class="flex">
      <div>
        <vueVerify1 ref="vueVerify2" @result="result2" :opt="{mode:'shape',
          position: [
              { key: 1, label: '❈' },
              { key: 2, label: '✿' },
              { key: 3, label: '✲' },
              { key: 4, label: '☃' },
              { key: 5, label: '❀' },
              { key: 6, label: '☂' },
              { key: 7, label: '❄' },
              { key: 8, label: '✪' },
              { key: 9, label: '♧' }
          ] }" />
        <p><button @click="reset2" @result="result2">reset</button></p>
        <p>验证结果：<span v-show="v2">{{v2}}</span></p>
      </div>
      <pre class="code">
      options: {
        mode: 'shape',
        area: [
          { key: 1, value: 'rgb(255, 237, 237)', label: '红色' },
          { key: 2, value: 'rgb(208, 252, 223)', label: '绿色' },
          { key: 3, value: 'rgb(255, 240, 199)', label: '橘黄色' }
        ],
        position: [
          { key: 1, label: '❈' },
          { key: 2, label: '✿' },
          { key: 3, label: '✲' },
          { key: 4, label: '☃' },
          { key: 5, label: '❀' },
          { key: 6, label: '☂' },
          { key: 7, label: '❄' },
          { key: 8, label: '✪' },
          { key: 9, label: '♧' }
        ],
        success: 'Success!',
        successSub: 'Good job,dude!',
        error: 'Error...',
        errorSub: 'Try again'
      },
      </pre>
    </div>

    <div class="flex">
      <div>
        <vueVerify2 ref="vueVerify3" @code="getCode" />
        <p><button @click="reset3">reset</button></p>
        <p><input type="text" v-model="checkVal"> 验证结果：{{code===checkVal}}</p>
      </div>
      <pre>
      options: {
        type: 'string', // 随机英文数组组合
        range: [1, 20],
        width: 90,
        height: 28,
        background: '#ddd',
        codeSize: 5,
        fontColor: 'random',  //随机色或指定颜色 random
        font: '30px arial',
        line: [10, 35]
      },
    </pre>
    </div>

    <div class="flex">
      <div>
        <vueVerify2 ref="vueVerify4" @code="getCode2" :opt="{
        type:['+','-','*']
      }" />
        <p><button @click="reset4">reset</button></p>
        <p><input type="text" v-model="checkVal2"> 验证结果：{{code2==checkVal2}}</p>
      </div>
      <pre>
      options: {
        type:['+','-','*'], // ['+','-','*']  加法，减法，乘法随机运算
        range: [1, 20],
        width: 90,
        height: 28,
        background: '#ddd',
        codeSize: 5,
        fontColor: 'random',  //随机色或指定颜色 random
        font: '30px arial',
        line: [10, 35]
      },
    </pre>
    </div>

  </div>
</template>

<script>
import vueVerify1 from './components/vue-verify-1.vue'
import vueVerify2 from './components/vue-verify-2.vue'

export default {
  name: 'App',
  components: {
    vueVerify1,
    vueVerify2
  },
  data() {
    return {
      v1: '',
      v2: '',

      code: '',
      checkVal: '',
      code2: '',
      checkVal2: ''
    }
  },
  methods: {
    reset1() {
      this.$refs['vueVerify1'].setNewVerify()
    },
    result1(v) {
      console.log(v)
      this.v1 = v.toString()
    },

    reset2() {
      this.$refs['vueVerify2'].setNewVerify()
    },
    result2(v) {
      console.log(v)
      this.v2 = v.toString()
    },

    reset3() {
      this.$refs['vueVerify3'].display()
    },
    getCode(code) {
      this.code = code
    },
    reset4() {
      this.$refs['vueVerify4'].display()
    },
    getCode2(code) {
      this.code2 = code
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 70px 100px 100px 100px;
  /* overflow: auto;
  height: 100%; */
}
h1 {
  font-size: 58px;
  font-weight: normal;
}
.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 50px 0;
}
html {
  /* height: 100%; */
  padding: 0;
  margin: 0;
}
body {
  /* height: 100%; */
  padding: 0;
  margin: 0;
  background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
}
pre {
  font-size: 12px;
  color: #888;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
